<template>
	<view class="container">
		<view class="avatar-content">
			<u-avatar :src="avatar" size="150"></u-avatar>
		</view>
		<view style="width: 90%;margin-left: 5%;margin-top: 10%;">
			<u--form labelPosition="left" :model="form" ref="uForm">
				<u-form-item labelWidth="70" label="昵称" prop="nickName" borderBottom ref="item1">
					<u--input v-model="form.nickName" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="70" label="性别" prop="sex" borderBottom ref="item1">
					<!-- <u--input v-model="form.sexTmp" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u--input> -->
					<u-radio-group v-model="form.sex" @change="radioGroupChange">
						<u-radio name=0>男生</u-radio>
						<u-radio name=1>女生</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="70" label="邮箱" prop="email" borderBottom ref="item1">
					<u--input v-model="form.email" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="70" label="手机号码" prop="phonenumber" borderBottom ref="item1">
					<u--input v-model="form.phonenumber" border="none"></u--input>
				</u-form-item>
			</u--form>
			<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
				@close="showSex = false" @select="sexSelect">
			</u-action-sheet>
			<u-calendar :show="show"></u-calendar>
		</view>
		<view style="margin-top: 15%; width: 70%;margin-left: 14%;">
			<u-button type="primary" text="修改资料" @click="handleEdit()"></u-button>
		</view>

	</view>
</template>

<script>
	import {
		getUserProfile,
		updateUserProfile
	} from '@/api/system/user'
	export default {
		data() {
			return {
				avatar: 'https://www.taotaohomecraft.press/prod-api/profile/tao_logo.jpg',
				showSex: false,
				form: {},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
			}
		},
		onLoad(options) {
			if (options.data) {
				const originData = JSON.parse(decodeURIComponent(options.data));
				console.log(originData)
				this.form = originData
				this.userProfile()
			}
		},
		methods: {
			async userProfile() {
				const res = await getUserProfile(this.form.userId)
				this.form = res.data
			},
			sexSelect(e) {
				this.form.sex = e.name
				this.$refs.uForm.validateField('sex')
			},
			async handleEdit() {
				const res = await updateUserProfile(this.form);
				console.log(res)
				if (res.code === 200) {
					uni.showToast({
						title: "修改成功"
					})
				}
			},
			radioGroupChange(e) {
				this.form.sex = e
			},
		},
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.avatar-content {
		width: 100%;
		display: flex;
		justify-content: center;
		// margin-top: 7%;
	}
</style>